body,html{
  height: 100%;
}
.wrapper{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  height: 100%;
}
.header{
  background: url("../images/header.jpg") no-repeat center / 100%;
  height: 3.3rem;
}
.content{
  background: url("../images/bottom.jpg") no-repeat bottom center / 100% 1.16rem;
  padding-bottom: 1.16rem;
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-justify-content:space-around;
  justify-content:space-around;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  a{
    background-repeat: no-repeat;
    background-size: 100%;
    width: 5.78rem;
    height: 2.2rem;
  }
  .high{
    background-image: url("../images/a.png");
  }
  .middle{
    background-image: url("../images/b.png");
  }
  .primary{
    background-image: url("../images/c.png");
  }
}

.signBox{
  position: fixed;
  width: 100%;
  max-width: 640px;
  height: 100%;
  background: rgba(0,0,0,0.5);
  top: 0;
  z-index: 999;
  .signForm{
    background: #fff url("../images/boxBg.jpg") no-repeat top center / 100% 1.03rem;
    width: 6.44rem;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border-radius: 0.07rem;
    color: #131313;
    padding-bottom: .1rem;
    h1{
      font-size: .4rem;
      text-align: center;
      padding: 0.44rem 0 .54rem;
      line-height: 1;
    }
    .signFormMain{
      position: relative;
      width: 5rem;
      margin: 0 auto;
    }
    input{
      display: block;
      height: .9rem;
      font-size: .34rem;
      margin-bottom: .4rem;
      border-radius: 0.07rem;
      background: #fff;
      border: 1px solid #d2d2d2;
      padding: 0 0.34rem;
      width: 100%;
    }
    .select{
      position: relative;
      select{
        display: block;
        height: .9rem;
        font-size: .34rem;
        margin-bottom: .4rem;
        border-radius: 0.07rem;
        background: #fff;
        border: 1px solid #d2d2d2;
        padding: 0 0.34rem;
        width: 100%;
        outline: none;
        color: #757575;
      }
      &:after{
        content: '';
        position: absolute;
        background: url("../images/arrow.png") no-repeat center / 100%;
        width: 0.24rem;
        height: .52rem;
        top: 50%;
        right: .18rem;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }

    .tip{
      color: #ff596c;
      font-size: .26rem;
      position: absolute;
      left: 50%;
      bottom: -0.6rem;
      text-align: center;
      width: auto;
      line-height: 2;
      background: url("../images/mark.png") no-repeat left 0.13rem;
      background-size: .2rem;
      padding-left: .25rem;
      display: none;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    button{
      background: url("../images/start.png") no-repeat center / 100%;
      width: 3.5rem;
      height: 1.46rem;
      display: block;
      color: #fff;
      font-size: .38rem;
      margin: .5rem auto;
      &:active{
        background-image: url("../images/startHover.png");
      }
      span{
        margin-bottom: 0.25rem;
        display: block;
      }
    }
  }
}
